axios.defaults.baseURL = "http://10.10.74.125:7300/mock/609e6359a624ef1b00365cb7/dv/";

// 绘制Panel1
function drawPanel1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('panel1-chart'));


    // 指定图表的配置项和数据
    var option = {
        // title: {
        //     text: 'ECharts 入门示例'
        // },
        tooltip: {},
        grid: {
            left: "10%",
            right: "10%",
            top: "10%",
            bottom: "0%",
            containLabel: true
        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    axios.get("/daping/panel1")
        .then(function(response) {
            xAxis_data = response.data.data.xAxis.data;
            console.log('xAxis_data :>> ', xAxis_data);
            series_data = response.data.data.series[0].data;
            console.log('series_data :>> ', series_data);

            myChart.setOption({
                xAxis: {
                    data: xAxis_data,
                },
                series: [{
                    data: series_data
                }]
            })
        })
        .catch(function(response) {

        })
}

// 绘制Panel2
function drawPanel2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('panel2-chart'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        grid: {
            left: "10%",
            right: "10%",
            top: "10%",
            bottom: "0%",
            containLabel: true
        },
        // legend: {
        //     data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
        // },
        series: [{
                name: '访问来源',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                    fontSize: 14,
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1548, name: '搜索引擎' },
                    { value: 775, name: '直达' },
                    { value: 679, name: '营销广告', selected: true }
                ]
            },
            {
                name: '访问来源',
                type: 'pie',
                radius: ['45%', '60%'],
                labelLine: {
                    length: 30,
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,

                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                data: [
                    { value: 1048, name: '百度' },
                    { value: 335, name: '直达' },
                    { value: 310, name: '邮件营销' },
                    { value: 251, name: '谷歌' },
                    { value: 234, name: '联盟广告' },
                    { value: 147, name: '必应' },
                    { value: 135, name: '视频广告' },
                    { value: 102, name: '其他' }
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 绘制Panel3
function drawPanel3() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('panel3-chart'));

    // 指定图表的配置项和数据
    var option = {
        grid: {
            left: "10%",
            right: "10%",
            top: "10%",
            bottom: "0%",
            containLabel: true
        },
        xAxis: {},
        yAxis: {},
        series: [{
            symbolSize: 20,
            data: [
                [10.0, 8.04],
                [8.07, 6.95],
                [13.0, 7.58],
                [9.05, 8.81],
                [11.0, 8.33],
                [14.0, 7.66],
                [13.4, 6.81],
                [10.0, 6.33],
                [14.0, 8.96],
                [12.5, 6.82],
                [9.15, 7.20],
                [11.5, 7.20],
                [3.03, 4.23],
                [12.2, 7.83],
                [2.02, 4.47],
                [1.05, 3.33],
                [4.05, 4.96],
                [6.03, 7.24],
                [12.0, 6.26],
                [12.0, 8.84],
                [7.08, 5.82],
                [5.02, 5.68]
            ],
            type: 'scatter'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 绘制Panel4
function drawPanel4() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('panel4-chart'));

    var data = [{
        name: 'Grandpa',
        children: [{
            name: 'Uncle Leo',
            value: 15,
            children: [{
                name: 'Cousin Jack',
                value: 2
            }, {
                name: 'Cousin Mary',
                value: 5,
                children: [{
                    name: 'Jackson',
                    value: 2
                }]
            }, {
                name: 'Cousin Ben',
                value: 4
            }]
        }, {
            name: 'Father',
            value: 10,
            children: [{
                name: 'Me',
                value: 5
            }, {
                name: 'Brother Peter',
                value: 1
            }]
        }]
    }, {
        name: 'Nancy',
        children: [{
            name: 'Uncle Nike',
            children: [{
                name: 'Cousin Betty',
                value: 1
            }, {
                name: 'Cousin Jenny',
                value: 2
            }]
        }]
    }];

    option = {
        grid: {
            left: "10%",
            right: "10%",
            top: "10%",
            bottom: "0%",
            containLabel: true
        },
        series: {
            type: 'sunburst',
            // emphasis: {
            //     focus: 'ancestor'
            // },
            data: data,
            radius: [0, '90%'],
            label: {
                rotate: 'radial'
            }
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 绘制Panel5
function drawPanel5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('panel5-chart'));

    // 指定图表的配置项和数据
    var option = {
        grid: {
            left: "10%",
            right: "10%",
            top: "10%",
            bottom: "0%",
            containLabel: true
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [{
            name: 'Pressure',
            type: 'gauge',
            detail: {
                formatter: '{value}'
            },
            data: [{
                value: 0,
                name: 'SCORE'
            }]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    axios.get("/daping/panel5")
        .then(function(response) {
            myChart.setOption({
                series: [{
                    data: [{
                        value: response.data.data.gauge.value,
                    }]
                }]
            })
        })
        .catch(function(response) {

        })




}

// 绘制Panel6
function drawPanel6() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('panel6-chart'));

    // 指定图表的配置项和数据
    var option = {
        grid: {
            left: "10%",
            right: "10%",
            top: "10%",
            bottom: "0%",
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: 'rgba(0,0,0,0.2)',
                    width: 1,
                    type: 'solid'
                }
            }
        },

        legend: {
            data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
        },

        singleAxis: {
            top: 50,
            bottom: 50,
            axisTick: {},
            axisLabel: {},
            type: 'time',
            axisPointer: {
                animation: true,
                label: {
                    show: true
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    opacity: 0.2
                }
            }
        },

        series: [{
            type: 'themeRiver',
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.8)'
                }
            },
            data: [
                ['2015/11/08', 10, 'DQ'],
                ['2015/11/09', 15, 'DQ'],
                ['2015/11/10', 35, 'DQ'],
                ['2015/11/11', 38, 'DQ'],
                ['2015/11/12', 22, 'DQ'],
                ['2015/11/13', 16, 'DQ'],
                ['2015/11/14', 7, 'DQ'],
                ['2015/11/15', 2, 'DQ'],
                ['2015/11/16', 17, 'DQ'],
                ['2015/11/17', 33, 'DQ'],
                ['2015/11/18', 40, 'DQ'],
                ['2015/11/19', 32, 'DQ'],
                ['2015/11/20', 26, 'DQ'],
                ['2015/11/21', 35, 'DQ'],
                ['2015/11/22', 40, 'DQ'],
                ['2015/11/23', 32, 'DQ'],
                ['2015/11/24', 26, 'DQ'],
                ['2015/11/25', 22, 'DQ'],
                ['2015/11/26', 16, 'DQ'],
                ['2015/11/27', 22, 'DQ'],
                ['2015/11/28', 10, 'DQ'],
                ['2015/11/08', 35, 'TY'],
                ['2015/11/09', 36, 'TY'],
                ['2015/11/10', 37, 'TY'],
                ['2015/11/11', 22, 'TY'],
                ['2015/11/12', 24, 'TY'],
                ['2015/11/13', 26, 'TY'],
                ['2015/11/14', 34, 'TY'],
                ['2015/11/15', 21, 'TY'],
                ['2015/11/16', 18, 'TY'],
                ['2015/11/17', 45, 'TY'],
                ['2015/11/18', 32, 'TY'],
                ['2015/11/19', 35, 'TY'],
                ['2015/11/20', 30, 'TY'],
                ['2015/11/21', 28, 'TY'],
                ['2015/11/22', 27, 'TY'],
                ['2015/11/23', 26, 'TY'],
                ['2015/11/24', 15, 'TY'],
                ['2015/11/25', 30, 'TY'],
                ['2015/11/26', 35, 'TY'],
                ['2015/11/27', 42, 'TY'],
                ['2015/11/28', 42, 'TY'],
                ['2015/11/08', 21, 'SS'],
                ['2015/11/09', 25, 'SS'],
                ['2015/11/10', 27, 'SS'],
                ['2015/11/11', 23, 'SS'],
                ['2015/11/12', 24, 'SS'],
                ['2015/11/13', 21, 'SS'],
                ['2015/11/14', 35, 'SS'],
                ['2015/11/15', 39, 'SS'],
                ['2015/11/16', 40, 'SS'],
                ['2015/11/17', 36, 'SS'],
                ['2015/11/18', 33, 'SS'],
                ['2015/11/19', 43, 'SS'],
                ['2015/11/20', 40, 'SS'],
                ['2015/11/21', 34, 'SS'],
                ['2015/11/22', 28, 'SS'],
                ['2015/11/23', 26, 'SS'],
                ['2015/11/24', 37, 'SS'],
                ['2015/11/25', 41, 'SS'],
                ['2015/11/26', 46, 'SS'],
                ['2015/11/27', 47, 'SS'],
                ['2015/11/28', 41, 'SS'],
                ['2015/11/08', 10, 'QG'],
                ['2015/11/09', 15, 'QG'],
                ['2015/11/10', 35, 'QG'],
                ['2015/11/11', 38, 'QG'],
                ['2015/11/12', 22, 'QG'],
                ['2015/11/13', 16, 'QG'],
                ['2015/11/14', 7, 'QG'],
                ['2015/11/15', 2, 'QG'],
                ['2015/11/16', 17, 'QG'],
                ['2015/11/17', 33, 'QG'],
                ['2015/11/18', 40, 'QG'],
                ['2015/11/19', 32, 'QG'],
                ['2015/11/20', 26, 'QG'],
                ['2015/11/21', 35, 'QG'],
                ['2015/11/22', 40, 'QG'],
                ['2015/11/23', 32, 'QG'],
                ['2015/11/24', 26, 'QG'],
                ['2015/11/25', 22, 'QG'],
                ['2015/11/26', 16, 'QG'],
                ['2015/11/27', 22, 'QG'],
                ['2015/11/28', 10, 'QG'],
                ['2015/11/08', 10, 'SY'],
                ['2015/11/09', 15, 'SY'],
                ['2015/11/10', 35, 'SY'],
                ['2015/11/11', 38, 'SY'],
                ['2015/11/12', 22, 'SY'],
                ['2015/11/13', 16, 'SY'],
                ['2015/11/14', 7, 'SY'],
                ['2015/11/15', 2, 'SY'],
                ['2015/11/16', 17, 'SY'],
                ['2015/11/17', 33, 'SY'],
                ['2015/11/18', 40, 'SY'],
                ['2015/11/19', 32, 'SY'],
                ['2015/11/20', 26, 'SY'],
                ['2015/11/21', 35, 'SY'],
                ['2015/11/22', 4, 'SY'],
                ['2015/11/23', 32, 'SY'],
                ['2015/11/24', 26, 'SY'],
                ['2015/11/25', 22, 'SY'],
                ['2015/11/26', 16, 'SY'],
                ['2015/11/27', 22, 'SY'],
                ['2015/11/28', 10, 'SY'],
                ['2015/11/08', 10, 'DD'],
                ['2015/11/09', 15, 'DD'],
                ['2015/11/10', 35, 'DD'],
                ['2015/11/11', 38, 'DD'],
                ['2015/11/12', 22, 'DD'],
                ['2015/11/13', 16, 'DD'],
                ['2015/11/14', 7, 'DD'],
                ['2015/11/15', 2, 'DD'],
                ['2015/11/16', 17, 'DD'],
                ['2015/11/17', 33, 'DD'],
                ['2015/11/18', 4, 'DD'],
                ['2015/11/19', 32, 'DD'],
                ['2015/11/20', 26, 'DD'],
                ['2015/11/21', 35, 'DD'],
                ['2015/11/22', 40, 'DD'],
                ['2015/11/23', 32, 'DD'],
                ['2015/11/24', 26, 'DD'],
                ['2015/11/25', 22, 'DD'],
                ['2015/11/26', 16, 'DD'],
                ['2015/11/27', 22, 'DD'],
                ['2015/11/28', 10, 'DD']
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 显示市场需求人数
function displayXuqiu() {
    document.getElementById("xuqiu").innerText = "55555";
}

// 显示市场供应人数
function displayGongying() {
    document.getElementById("gongying").innerText = "66666";
}


// 绘制所有Panel
function drawAllPanels() {
    drawPanel1();

    drawPanel2();

    drawPanel3();

    drawPanel4();

    drawPanel5();

    drawPanel6();

    displayXuqiu();

    displayGongying();
}